const images = []

/**
 * 读取视频里面所有图片
 * */
const getVideoImages = {
    list: [],
    arr: [],
    timeout: 20,
    base64ToBlob(base64String, contentType) {
        let base64Data = base64String.split(',')[1];
        let byteCharacters = atob(base64Data);
        let byteArrays = [];
        for (let i = 0; i < byteCharacters.length; i++) {
            byteArrays.push(byteCharacters.charCodeAt(i));
        }
        let arrayBuffer = new Uint8Array(byteArrays).buffer;
        return new Blob([arrayBuffer], { type: contentType || 'image/png' });
    },
    init(url) {
        return new Promise((resolve, reject) => {
            this.video = document.createElement('video');
            this.video.src = url;
            // this.video.volume = 0;
            // this.video.muted = true;
            this.video.addEventListener('loadeddata', () => {
                this.duration = this.video.duration;
                // 创建一个<canvas>元素
                this.canvas = document.createElement('canvas');
                this.context = this.canvas.getContext('2d');
                // 设置<canvas>的宽高与视频宽高一致
                this.canvas.width = this.video.videoWidth;
                this.canvas.height = this.video.videoHeight;
                resolve()
            })
            this.video.onerror = reject
        })
    },
    playAnimate(reject) {
        if(this.video.paused && typeof(reject) === 'function'){
            return reject()
        }
        // 将当前视频帧绘制到<canvas>上
        this.context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
        // 获取<canvas>上的图像数据
        // const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
        const base64 = this.canvas.toDataURL('image/png', 1.0)
        // const blob = this.base64ToBlob(base64)
        console.log('第'+this.list.length+'帧图片 ->> ')
        // 这里可以对图像数据进行处理，或保存为图片等操作
        this.list.push({
            id:  this.list.length,
            // imageData: imageData,
            base64: base64,
            // blob: blob,
            currentTime: this.video.currentTime,
            duration: this.duration
        })
        // 继续读取下一帧
        this.animateId = setTimeout(this.playAnimate.bind(this, [reject]), this.timeout)
        // this.animateId =  requestAnimationFrame(this.playAnimate.bind(this, [reject]));
    },
    // 停止动画
    stopAnimation() {
        if (this.animateId) {
            // cancelAnimationFrame();
            clearTimeout(this.animateId)
        }
    },
    start(url) {
        return new Promise((resolve, reject) => {
            this.resolve = resolve;
            if(this.video && !this.video.paused){
                this.video.pause();
                this.video.currentTime = 0
            }
            this.list = [];
            this.init(url).then(() => {
                this.video.onended = () => {
                    this.stopAnimation()
                    resolve(this.list)
                }
                this.video.play();
                this.playAnimate.apply(this, [reject])
            }).catch((error) => {
                reject(error)
            })
        })
    },
    stop(){
        this.stopAnimation()
        if(this.video && !this.video.paused){
            this.video.pause();
            this.video.currentTime = 0
        }
        if(typeof(this.resolve) === 'function'){
            this.resolve(this.list)
        }
    }
}

class VideoImagePlay {
    list = []
    currentTime = 0
    constructor(list) {
        this.list = list
        this.getTime()
    }
    /** 计算图片视频 时长*/
    getTime(){

    }
    /** base64 转 blob*/
    base64ToBlob(base64String, contentType) {
        let base64Data = base64String.split(',')[1];
        let byteCharacters = atob(base64Data);
        let byteArrays = [];
        for (let i = 0; i < byteCharacters.length; i++) {
            byteArrays.push(byteCharacters.charCodeAt(i));
        }
        let arrayBuffer = new Uint8Array(byteArrays).buffer;
        return new Blob([arrayBuffer], { type: contentType || 'image/png' });
    }

    play(){

    }
    stop(){

    }
}
